<template>
  <view class="card-page">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <view class="list" v-for="(item, index) in dataList" :key="index">
        <image mode="widthFix" :src="item.img" class="img"></image>
        <view class="right">
          <view class="title">
            {{ item.title }}
          </view>
          <view class="small">{{ item.msg_text }}</view>
        </view>
      </view>
      <!-- <view class="list">
        <image
          mode="widthFix"
          src="../../static/index/xitong.png"
          class="img"></image>
        <view class="right" style="margin-top: 15rpx">
          <view class="title">系统公告</view>
        </view>
      </view> -->
    </z-paging>
  </view>
</template>

<script>
import { noticeList } from "@/api/mainapi.js";
export default {
  data() {
    return {
      tabsList: [
        {
          name: "未使用",
          status: "1",
        },
        {
          name: "已使用",
          status: "2",
        },
        {
          name: "已过期",
          status: "3",
        },
      ],
      tabsIndex: 0,
      dataList: [],
    };
  },
  methods: {
    tabsChange(index) {
      this.tabsIndex = index;
      this.refreshList();
    },
    refreshList() {
      this.$refs.paging.scrollToTop();
      this.$refs.paging.refresh();
    },
    async queryList(pageNo, pageSize) {
      const res = await noticeList({
        limit: pageSize,
        page: pageNo,
      });
      if (res.response.statusCode === 200) {
        if (res.data.data.data.length != 0) {
          this.$refs.paging.complete(res.data.data.data);
        } else {
          this.$refs.paging.complete(false);
        }

        // console.log(this.houseList, 2332);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.card-page {
  width: 100%;
  min-height: 100vh;
  background: #f8f8f8;
  padding: 30rpx;
  box-sizing: border-box;

  .list {
    width: 94%;
    margin-left: 3%;
    padding: 18rpx 20rpx;
    background: #fff;
    border-radius: 12px;
    display: flex;
    margin-top: 20rpx;
    box-sizing: border-box;
    .img {
      width: 72rpx;
    }
    .right {
      width: 80%;
      margin-left: 20rpx;
      align-items: center;
      .title {
        font-weight: 400;
        font-size: 28rpx;
        color: #000000;
        line-height: 40rpx;
        text-align: left;
        white-space: nowrap; /* 禁止文本换行 */
        overflow: hidden; /* 隐藏超出容器的文本 */
        text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
      }
      .small {
        color: #999999;
        line-height: 34rpx;
        text-align: left;
        font-size: 24rpx;
      }
    }
  }
}
</style>
